<template>
  <div
    class="about-master-container"
    :loading="loading"
  >
    <base-breadcrumb :title="titleName">
      <a-form-model
        ref="form"
        :model="queryParam"
        :rules="rules"
      >
        <a-card>
          <title-name title="项目信息" />
          <div class="main_content">
            <a-row>
              <a-col :md="16" :sm="16">
                  <a-form-model-item label="所属单位" prop="projectId" :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }" :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }">
                      <org-tree-select v-model="queryParam.projectId" :disabled="isComment"  isAutoSelectFirst checkStrictly @select="selectOrg"></org-tree-select>
                  </a-form-model-item>
              </a-col>
              <!-- <a-col :span="8">
                <a-form-model-item
                  label="所属分公司"
                  prop="branchCompanyId"
                >
                  <SelectSubCompany
                    v-model="queryParam.branchCompanyId"
                    placeholder="请选择"
                    :disabled="isComment"
                    @change="handleChange"
                  />
                  labelInValue
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item
                  label="项目名称"
                  prop="projectId"
                >
                  <SelectProject
                    v-model="queryParam.projectId"
                    placeholder="请选择"
                    :disabled="isComment"
                    :form="queryParam"
                    :is-clear="!$route.query.id"
                    key-value="branchCompanyId"
                  />
                </a-form-model-item>
              </a-col> -->
            </a-row>
          </div>
        </a-card>
        <a-card v-if="!isComment">
          <title-name title="索赔信息" />
          <div class="main_content">
            <a-row>
              <a-col :span="8">
                <a-form-model-item
                  label="立项人"
                  class="employee"
                >
                  <span>{{ $userInfo().employee ? $userInfo().employee.name : '' }}</span>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item
                  label="预计索赔金额(万元)"
                  prop="estimatedClaimAmount"
                >
                  <BaseInputNumber
                    v-model.number="queryParam.estimatedClaimAmount"
                    :disabled="isComment"
                    :min="0"
                    :precision="2"
                    placeholder="请输入"
                  />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item
                  label="立项人职务"
                  prop="proposalPersonPosition"
                >
                  <BaseInput
                    v-model.trim="queryParam.proposalPersonPosition"
                    placeholder="请输入"
                    disabled
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <!--<a-col :span="8">
                                     索赔小组成员-->
            <!-- <a-form-model-item label="索赔小组成员">
                                    <a-button v-if="!isComment" type="primary" @click="getAddPersonnel">添加索赔小组成员</a-button>
                                    <p>
                                        <a-tag closable
                                               v-for="item in queryParam.claimsPanelMember"
                                               :key="item.name"
                                               @close="deletePersonnel(item)">
                                            {{ item.name }}
                                        </a-tag>
                                    </p>
                                </a-form-model-item>
                            </a-col> -->
            <a-row>
              <a-col :span="8">
                <a-form-model-item
                  label="索赔事项"
                  prop="claims"
                >
                  <BaseInput
                    v-model.trim="queryParam.claims"
                    :disabled="isComment"
                    placeholder="请输入"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-form-model-item
                  label="索赔原因"
                  prop="claimReason"
                >
                  <BaseTextarea
                    v-model.trim="queryParam.claimReason"
                    :disabled="isComment"
                    placeholder="请输入"
                  />
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>
        </a-card>
        
        <div
          v-if="isComment"
          class="box"
        >
          <a-card>
            <title-name title="索赔信息" />
            <div class="main_content">
              <a-descriptions :column="{ xs: 2, sm: 2, md: 2 }">
                <a-descriptions-item label="立项人">
                  {{ queryParam.projectSponsor }}
                </a-descriptions-item>
                <a-descriptions-item label="立项人电话号码">
                  {{ queryParam.phone }}
                </a-descriptions-item>
              </a-descriptions>
              <a-descriptions :column="{ xs: 2, sm: 2, md: 2 }">
                <a-descriptions-item label="立项人职务">
                  {{
                    queryParam.proposalPersonPosition
                  }}
                </a-descriptions-item>
                <a-descriptions-item label="预计索赔金额(万元)">
                  {{
                    queryParam.estimatedClaimAmount
                  }}
                </a-descriptions-item>
              </a-descriptions>
              <a-descriptions :column="{ xs: 2, sm: 2, md: 2 }">
                <a-descriptions-item label="立项时间">
                  {{ queryParam.projectTime }}
                </a-descriptions-item>
                <a-descriptions-item
                  label="索赔小组成员"
                >
                  <a-tag
                    v-for="item in queryParam.claimsPanelMember"
                    :key="item.id"
                  >
                    {{
                      item.name
                    }}
                  </a-tag>
                </a-descriptions-item>
              </a-descriptions>
              <a-descriptions :column="{ xs: 2, sm: 2, md: 2 }">
                <a-descriptions-item label="索赔事项">
                  {{ queryParam.claims }}
                </a-descriptions-item>
              </a-descriptions>
              <a-descriptions :column="{ xs: 2, sm: 2, md: 2 }">
                <a-descriptions-item label="索赔原因">
                  {{ queryParam.claimReason }}
                </a-descriptions-item>
              </a-descriptions>
            </div>
          </a-card>
        </div>

        <comments
          v-if="isComment"
          :id="queryParam.id"
        />


        <a-card>
          <title-name title="附件列表" />
          <u-table
            :is-show="!isComment"
            :upload-list="addFile"
            :delete-url="fileDel"
            :list-url="fileList"
            :business-id="queryParam.id"
            business-code="LCM11"
            @fileArrysData="afterUpload"
          />
        </a-card>
      </a-form-model>

      <div class="tar page-btn-right-top">
        <template v-if="!isComment">
          <a-button
            :loading="DRAFTloading"
            type="primary"
            class="ml12"
            @click="getPost('DRAFT')"
          >
            保存草稿
          </a-button>
          <a-button
            :loading="SUBMITTEDloading"
            type="primary"
            class="ml12"
            @click="getPost('SUBMITTED')"
          >
            提交
          </a-button>
        </template>
        <a-button
          class="ml12"
          @click="$close()"
        >
          关闭
        </a-button>
      </div>
      <SelectPerson
        :visible.sync="organizingStaffVisible"
        title="选择索赔小组成员"
        :list.sync="queryParam.claimsPanelMember"
      />
    <selectApprover :businessId="businessId"  :processConfig="setProcessConfig"></selectApprover>
    </base-breadcrumb>
  </div>
</template>

<script>
import {
    addClaimEstablishment,
    editClaimEstablishment,
    getClaimEstablishmentDetails,
    claimEstablishmentAddFile,
    claimEstablishmentDeleteFile,
    claimEstablishmentFindFileList
} from '@/api/legal'
import otherTypeApi from '@/api/legal/branchContract/otherType'
import { getRightJobs } from '@/api/system/system'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject'
import deleteFun from '@/views/science/achievementsManage/delete'
import comments from './components/comments'
import SelectPerson from '@/components/Select/SelectPerson'

export default {
    name: 'EditClaimEstablishment',
    components: {
        SelectSubCompany,
        SelectProject,
        comments,
        SelectPerson
    },
    data() {
        return {
            addFile: claimEstablishmentAddFile(),
            fileDel: claimEstablishmentDeleteFile(),
            fileList: claimEstablishmentFindFileList(),
            titleName: undefined,
            loading: false,
            DRAFTloading: false,
            SUBMITTEDloading: false,
            queryParam: {
                id: this.$route.query.id
            },
            rules: {
                branchCompanyId: [{ required: true, message: '请选择分公司', trigger: 'change' }],
                projectId: [{ required: true, message: '请选择项目名称', trigger: 'change' }],
                estimatedClaimAmount: [
                    { required: true, message: '请输入预计索赔金额', trigger: 'blur' }
                ],
                claims: [{ required: true, message: '请输入索赔事项', trigger: 'blur' }],
                claimReason: [{ required: true, message: '请输入索赔原因', trigger: 'blur' }],
                // proposalPersonPosition: [{ required: true, message: '请输入立项人职务', trigger: 'blur' }]
            },
            organizingStaffVisible: false,
            title: '添加索赔小组成员',
            confirmLoading: false,
            isComment: false,
            //获取流程配置值
            processConfig: null,
           //点击提交发送流程配置值
           setProcessConfig: null,
            businessId: null
        }
    },
   async created() {
        this.isComment = Number(this.$route.query.isComment) === 1
        this.getData()
        getRightJobs({id: this.$userInfo().currentPost.postId}).then((res) => {
          if (res) {
            const pname = res.data.pname;
            this.$set(this.queryParam, 'proposalPersonPosition', pname)
          }
        })
            //获取通过获取流程配置值
       this.processConfig = await this.$getConfigFn('legal_claim_demage')
    },
    methods: {
        //选择单位
        selectOrg(val) {
            if (val && val.length) {
              // this.handleChange()
                this.queryParam.branchCompanyId = val[val.length - 2].orgId;
                this.queryParam.projectId = val[val.length - 1].projectId;
            }
            console.log('valvalval',val,this.queryParam)
        },
        afterUpload(val) {
          const list = val.map((item, index) => {
            return item.commonId;
          })
          if (!this.queryParam.id) {
            if (this.queryParam.fileIdsList) {
                this.queryParam.fileIdsList = list
            } else {
                this.$set(this.queryParam, 'fileIdsList', list)
            }
          }
        },
        handleChange() {
            if (this.queryParam.projectId) {
                this.queryParam.projectId = ''
            } else {
                this.$set(this.queryParam, 'projectId', '')
            }
        },
        async getData() {
            if (this.queryParam.id) {
                this.titleName = this.$route.meta.title = this.isComment ? '批注意见' : '索赔立项编辑'
                this.loading = true
                let res = await getClaimEstablishmentDetails({ id: this.queryParam.id })
                this.loading = false
                if (res.code === this.SUCCESS_CODE) {
                    const project = res.data.project
                    const claimInformation = res.data.claimInformation
                    this.queryParam = Object.assign(res.data, { ...project, ...claimInformation })
                }
            } else {
                this.queryParam = {}
                this.titleName = this.$route.meta.title = '索赔立项新增'
            }
        },
        async submit() {
            if (!await this.getPost('DRAFT')) {
                return
            }
            await this.getPost('SUBMITTED')
        },
        /**
         *新增
         */
        async getPost(status) {
            this.setProcessConfig = null;       
            return new Promise(resolve => {
                // if (!this.queryParam.claimsPanelMember || this.queryParam.claimsPanelMember.length === 0) {
                //     this.$noticeWarning('请添加索赔小组成员')
                //     return false
                // }
                const msg = {
                  'DRAFT': '保存',
                  'SUBMITTED': '提交'
                }
                console.log('this.queryParam',this.queryParam)
                this.$refs.form.validate(async (valid) => {
                    if (valid) {
                      this.submitApprovalConfirm(status === 'SUBMITTED' ? this.processConfig:6, async (flag)=>{
                        if(!flag) {
                          this[status+ 'loading'] = false
                          return
                        }
                        let form = this.$clone(this.queryParam)
                        if (!form.projectId) delete form.projectId
                        if (!form.branchCompanyId) delete form.branchCompanyId
                        form.legalAuditStatusEnum = status
                        this[status+ 'loading'] = true
                        if (form.id) {
                            let res = await editClaimEstablishment(form)
                            this[status+ 'loading'] = false
                            if (res.code === this.SUCCESS_CODE) {
                              if(status === 'SUBMITTED'){
                                //提交时，返回id
                                this.businessId = res.data.id || this.$route.query.id;
                                this.setProcessConfig = this.processConfig;
                              }else{
                                resolve(true)
                                this.$close()
                              }
                                this.$message.success(msg[status] + '成功')
                                // await this.getData()

                            }
                        } else {
                            let res = await addClaimEstablishment(form)
                            this[status+ 'loading'] = false
                            if (res.code === this.SUCCESS_CODE) {
                                this.queryParam.id = res.data.id
                                this.$message.success(msg[status] + '成功')
                                // await this.getData()
                                if(status === 'SUBMITTED'){
                                    //提交时，返回id
                                  this.businessId = res.data.id;
                                  this.setProcessConfig = this.processConfig;
                              }else{
                                resolve(true)
                                this.$close()
                              }
                            }
                        }
                        // if (status === 'SUBMITTED') {
                        // }
                      })
                    } else {
                        this.$noticeWarning('请填写完整')
                    }
                })
            })
        },
        addPersonnel(list) {
            console.log(list)
            this.queryParam.claimsPanelMember = list.map((item) => {
                return { name: item.employeeName, id: item.employeeId }
            })
        },
        deletePersonnel(i) {
            this.queryParam.claimsPanelMember = deleteFun(this.queryParam.claimsPanelMember, i)
        },
        getAddPersonnel() {
            this.organizingStaffVisible = true
        }
    }
}
</script>

<style scoped lang="less">
.box {
    margin: 12px 0;
}
/deep/ .ant-form-item{
  margin-bottom: 20px;
}
.employee {
  /deep/.ant-form-item-control{
    line-height: 36px;
  }
}
.main_content {
    padding: 0 20px;
    box-sizing: border-box;
}
</style>
